
<%@ page import="org.product.Product" %>
<%@ page import="org.knowlege.KnowlegeType" %>
<!doctype html>
<html>
	<head>
		<meta name="layout" content="page">
		<g:set var="entityName" value="${message(code: 'product.label', default: 'Product')}" />
		<title>产品信息页面</title>
		
	</head>
	<body>
		<script type="text/javascript">
			$(document).ready(function(){
				$(".module").groupContent();
			});
		</script>
		
		<a href="#show-product" class="skip" tabindex="-1"><g:message code="default.link.skip.label" default="Skip to content&hellip;"/></a>
		<div id="show-product" class="content scaffold-show" role="main">
			<h1><g:message code="default.show.label" args="[entityName]" /></h1>
			<g:if test="${flash.message}">
			<div class="message" role="status">${flash.message}</div>
			</g:if>
			<div>
					<table>
					<tr>
						<td align="right"><span id="productCode-label" class="property-label"><g:message code="product.productCode.label" default="Product Code" /></span></td>
						<td algin="left"><span class="property-value" aria-labelledby="productCode-label"><g:fieldValue bean="${productInstance}" field="productCode"/></span></td>
						<td align="right"><span id="productName-label" class="property-label"><g:message code="product.productName.label" default="Product Name" /></span></td>
						<td algin="left"><span class="property-value" aria-labelledby="productName-label"><g:fieldValue bean="${productInstance}" field="productName"/></span></td>
					</tr>
					<tr>
						<td align="right"><span id="productSpec-label" class="property-label"><g:message code="product.productSpec.label" default="Product Spec" /></span></td>
						<td align="left" colspan="3"><span class="property-value" aria-labelledby="productSpec-label"><g:fieldValue bean="${productInstance}" field="productSpec"/></span></td>
						
					</tr>
					<tr>
						<td align="right">备注</td>
						<td colspan="3" align="left">
							<span class="property-value" aria-labelledby="productDes-label"><g:fieldValue bean="${productInstance}" field="productDes"/></span>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<div id="details" role="main">
			
			<div id="knowlege-details">
				<ul class="tab">
					<g:each in="${KnowlegeType.list()}" status="i" var="knowlegeTypeInstance">
						<li>
							<g:remoteLink controller="knowlege" action="listByType" params="[productId:productInstance.id,knowlegeTypeId:knowlegeTypeInstance.id]" update="[success:'show-knowleges',failure:'error']"
    							on404="alert('not found');" onLoading="showSpinner(true);" onSuccess="showSpinner(false);" elementId="type${i}">${knowlegeTypeInstance}</g:remoteLink>
						</li>
					</g:each>
				</ul>
				<div id="show-knowleges" style="display:block;min-height:400px;" class="box"></div>
			</div>
			<div id="error"></div>
		</div>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#type0").trigger("click");
				function getKnowlegeData(){
					showSpinner(true);
					jQuery.ajax(
							{type:'POST',data:{'productId': '34','knowlegeTypeId': '1'}, 
							url:'/productknowlege/knowlege/listByType',
							success:function(data,textStatus){
								jQuery('#show-knowleges').html(data);
								showSpinner(false);;},
								error:function(XMLHttpRequest,textStatus,errorThrown){
									jQuery('#error').html(XMLHttpRequest.responseText);}
					});
				}
			});
		</script>
	</body>
</html>
